Ext.define('Ext.app.Main', {
	extend : 'Ext.container.Viewport',
	
	tabPanel: null,
	// requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
	getTools : function() {
		return Ext.create("Ext.Toolbar", {
					region : 'south',
					height : 25,
					items : ['登录人：', "sysAdmin", {
						xtype : "splitbutton",
						text : "注销"
					}]
				});
	},
	
	
	getMenu : function(){
		var content = '<div class="portlet-content">' + "KKKKKKKKKKKKKK"
				+ '</div>';
		return {
					id : 'app-options',
					title : '菜单',
					region : 'west',
					animCollapse : false,
					width : 200,
					minWidth : 150,
					maxWidth : 400,
					split : true,
					collapsible : false,
					layout : {
						type : 'accordion',
						animate : true
					},
					items : [{
						html : content,
						title : '设计时',
						autoScroll : true,
						border : false,
						iconCls : 'nav'
					}, {
						title : '运行时',
						html : content,
						border : false,
						autoScroll : true,
						iconCls : 'settings'
					}]
				};
	},
	
	createAppMain: function(){
		return {
				xtype:'tabpanel',
				minTabWidth:100,
				region : 'center',
				activeTab:1,
				items:[
					{
						title:'首页',
						html:'欢迎光临'
					},
					{
						title:'测试页面',
						layout:'fit',
						loader: {
							autoLoad:true,
					        url: '../js/simplepage4.js',
					        renderer: 'component',
//					        renderer: 'html',
					        params: {
					            userId: 1
					        }
					    }
						
					}
				]
				};
	},

	initComponent : function() {
		this.tabPanel =  this.createAppMain();
		Ext.apply(this, {
			id : 'app-viewport',
			renderTo : Ext.getBody(),
			layout : 'border',
			items : [{
				xtype : 'box',
				region : 'north',
				cls : 'header',
				height : 40,
				el : 'headerDiv'
			}, {
				xtype : 'container',
				region : 'center',
				layout : {
					type : 'border',
					padding : '2 5 5 5' // pad the layout from the window edges
				},
				items : [ this.getMenu(), this.tabPanel, this.getTools()]
			}]
		});
		this.callParent(arguments);
	}
});